/**
 * 用户列表页面交互逻辑
 * 负责加载用户列表数据、渲染表格和处理删除操作
 */
import { fetchDataList, deleteDataItem } from '../../js/api.js';

/**
 * 渲染用户列表到表格
 * @param {Array} data - 用户数据数组
 */
function renderUserTable(data) {
    const tableBody = document.getElementById('dataTableBody');
    tableBody.innerHTML = '';

    if (data.length === 0) {
        tableBody.innerHTML = '<tr><td colspan="6" class="text-center">暂无用户数据</td></tr>';
        return;
    }

    data.forEach(item => {
        const row = document.createElement('tr');
        // 根据角色设置不同的徽章样式
        const roleClass = item.role === 'admin' ? 'role-admin' : item.role === 'seller' ? 'role-seller' : 'role-user';

        row.innerHTML = `
            <td>${item.id}</td>
            <td>${item.username}</td>
            <td>${item.email}</td>
            <td><span class="status-badge ${roleClass}">${item.role}</span></td>
            <td>${new Date(item.created_at).toLocaleString()}</td>
            <td class="action-buttons">
                <a href="detail.html?id=${item.id}" class="btn btn-info btn-sm">查看</a>
                <a href="edit.html?id=${item.id}" class="btn btn-warning btn-sm">编辑</a>
                <button class="btn btn-danger btn-sm delete-btn" data-id="${item.id}">删除</button>
            </td>
        `;
        tableBody.appendChild(row);
    });

    // 添加删除按钮事件监听
    document.querySelectorAll('.delete-btn').forEach(button => {
        button.addEventListener('click', async (e) => {
            const id = parseInt(e.target.dataset.id);
            if (confirm('确定要删除此用户吗？此操作不可撤销！')) {
                const success = await deleteDataItem(id);
                if (success) {
                    loadUserList(); // 删除成功后重新加载列表
                }
            }
        });
    });
}

/**
 * 加载用户列表数据
 */
async function loadUserList() {
    try {
        const data = await fetchDataList();
        renderUserTable(data);
    } catch (error) {
        console.error('加载用户列表失败:', error);
        document.getElementById('dataTableBody').innerHTML = '<tr><td colspan="6" class="text-center text-danger">加载失败，请刷新页面重试</td></tr>';
    }
}

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', loadUserList);